<f:view xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:aui="http://liferay.com/faces/aui"
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:bridge="http://liferay.com/faces/bridge"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<h:head />
	<h:body>
		<h:form id="customerListForm">		    
		    <p:dataTable id="customerTable" styleClass="electroOfficeTable"
		    		var="customer" value="#{customerListController.customers}"
		    		selectionMode="single"
		    		selection="#{customerListController.selectedCustomer}"
		   			rowKey="#{customer.customerId}"
		            paginator="true" rows="10"
		            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		            rowsPerPageTemplate="5,10,15,25,50"  
		            filteredValue="#{customerListController.filteredCustomers}"
		            widgetVar="customerListWidget"
		            emptyMessage="Keine Kunden gefunden"
		            currentPageReportTemplate="Seite {currentPage} von {totalPages}" >
		                 
		       <p:ajax event="rowSelect" update=":customerListForm" />
			   
			   <f:facet id="headerFacet" name="header" styleClass="headerFacet" >
		        	<p:menubar styleClass="menubar" >
				        <p:submenu label="Datei" icon="ui-icon-document">
				            <p:submenu label="Neu" icon="ui-icon-contact">
				                <p:menuitem value="Kunde" url="#" />
				            </p:submenu>
				            <p:separator />
				            <p:menuitem value="Kundendetails" 
			        				actionListener="#{customerListController.navigateToCustomerView}"
			        				disabled="#{!customerListController.oneCustomerSelected}"
			        				ajax="false"
									immediate="true" />
							<p:separator />
				        </p:submenu>
				 
				        <p:submenu label="Bearbeiten" icon="ui-icon-pencil">
				            <p:menuitem value="Kunde bearbeiten" 
			        				actionListener="#{customerListController.navigateToCustomerEdit}"
			        				disabled="#{!customerListController.oneCustomerSelected}"
			        				ajax="false"
									immediate="true" />
				        </p:submenu>
				 
				        <f:facet name="options">
				            <p:inputText id="globalFilter" onkeyup="customerListWidget.filter()" placeholder="Suche" style="width:150px" />
				        </f:facet>
				    </p:menubar>
		        </f:facet>

	        	<p:column headerText="Messerli ID" width="80px" 
	        			sortBy="#{customer.customerId}" 
	        			filterBy="#{customer.customerId}"
	        			filterMatchMode="contains"
	        			id="customerId" >
	        		<h:outputText value="#{customer.customerId}" />
		        </p:column>
		        <p:column headerText="Anrede" width="80px"
	        			sortBy="#{customer.salutation}" 
	        			filterBy="#{customer.salutation}"
	        			filterMatchMode="contains" 
	        			id="salutation" >
	        		<h:outputText value="#{customer.salutation}" />
		        </p:column>
				<p:column headerText="Nachname" width="80px"
	        			sortBy="#{customer.lastname}" 
	        			filterBy="#{customer.lastname}"
	        			filterMatchMode="contains" 
	        			id="lastname" >
	        		<h:outputText value="#{customer.lastname}" />
		        </p:column>
		        <p:column headerText="Vorname" 
	        			sortBy="#{customer.firstname}" 
	        			filterBy="#{customer.firstname}"
	        			filterMatchMode="contains" 
	        			id="firstname" >
	        		<h:outputText value="#{customer.firstname}" />
		        </p:column>
		        <p:column headerText="Strasse" 
	        			sortBy="#{customer.street}" 
	        			filterBy="#{customer.street}"
	        			filterMatchMode="contains" 
	        			id="street" >
	        		<h:outputText value="#{customer.street}" />
		        </p:column>
		        <p:column headerText="PLZ" 
	        			sortBy="#{customer.plz}" 
	        			filterBy="#{customer.plz}"
	        			filterMatchMode="contains" 
	        			id="plz" >
	        		<h:outputText value="#{customer.plz}" />
		        </p:column>
		        <p:column headerText="Ort" 
	        			sortBy="#{customer.city}" 
	        			filterBy="#{customer.city}"
	        			filterMatchMode="contains" 
	        			id="city" >
        			<h:outputText value="#{customer.city}" />
		        </p:column>
		    </p:dataTable>
		</h:form>
	</h:body>
</f:view>